// 收入结构高收入模块
import bgImg from '../../assets/image/service.png'

export function HighIncome({title, count, color}: {
    title: string;
    count: string;
    color: string;
}) {
    const boxStyle = {
        boxSizing: 'border-box',
        padding: '10px 25px',
        // border: '1px solid #fff',
        width: '160px',
        height: '70px',
        backgroundImage: `url(${bgImg})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
    }
    const titStyle = {
        color: '#fff',
        fontSize: '12px',
        lineHeight: 2,
    }
    const countStyle = {
        color: color,
        fontWeight: 'bold',
        lineHeight: 1.5,
        fontSize: '16px',
    }
    const afterStyle = {
        color: '#aaa',
        fontWeight: 'normal',
        marginLeft: '8px',
        fontSize: '10px',
    };
    return (
        <>
            <div style={boxStyle}>
                <p style={titStyle}>{title}</p>
                <p style={countStyle}>
                    {count}
                    <span style={afterStyle}>元</span>
                </p>
            </div>

        </>
    )
}


// 财务费用支出模块
import iconImg from '../../assets/image/servuce3.png';

export function Expenditure({title, count}: {
    title: string,
    count: number,
}) {
    const boxStyle = {
        width: '160px',
        boxSizing: 'border-box',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        // border: '1px solid #fff',
        margin: '5px',
        padding: '5px',
    }
    const iconStyle = {
        width: '50px',
        height: '50px',
        backgroundImage: `url(${iconImg})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        marginRight: '10px',
    }
    const countStyle = {
        color: '#29D7D9',
        fontSize: '20px',
        // fontWeight: 'bold',
        lineHeight: 1.2,
    }
    const titleStyle = {
        color: '#fff',
        fontSize: '12px',
        lineHeight: 1.5,
    }
    return (
        <>
            <div style={boxStyle}>
                <div style={iconStyle}></div>
                <div>
                    <p style={countStyle}>{count}</p>
                    <p style={titleStyle}>{title}</p>
                </div>
            </div>

        </>
    )
}


// 易损消耗支出季度模块
export function Quarter({title, select}: { title: string, select: boolean }) {
    const height = '35px'
    const width = '90px'
    const fontSize = '12px'

    const boxStyle = {
        width: width,
        height: height,
        border: `1px solid #0C403F`,
        textAlign: 'center',
        lineHeight: height,
        color: `#aaa`,
        fontSize: fontSize
    }
    const boxStyleOn = {
        width: width,
        height: height,
        border: `1px solid #1DCFC5`,
        textAlign: 'center',
        lineHeight: height,
        color: `#1DCFC5`,
        fontSize: fontSize
    }
    return (
        <>
            <div style={select ? boxStyleOn : boxStyle}>
                {title}
            </div>
        </>
    )
}


//科室收入占比统计
export function Statistics({title, count, url}: { title: string, count: number, url: string }) {

    const boxStyle = {
        width: '180px',
        height: '80px',
        padding: '20px',
        boxSizing: 'border-box',
        backgroundColor: '#032124',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around',
        margin: '5px',
    }
    const iconStyle = {
        width: '50px',
        height: '50px',
        backgroundImage: `url('${url}')`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        marginRight: '12px'
    }

    const countStyle = {
        color: '#fff',
        fontSize: '18px',
        lineHeight: 2
    }
    const titleStyle = {
        color: '#fff',
        fontSize: '12px',
        lineHeight: 1.5
    }

    return (
        <>
            <div style={boxStyle}>
                <div style={iconStyle}>

                </div>
                <div>
                    <p style={countStyle}>{count}</p>
                    <p style={titleStyle}>{title}</p>
                </div>
            </div>
        </>
    )
}

// 科室收入占比上方
export function MedicalIncome({title, count, color, bgColor}: {
    title: string,
    count: number,
    color: string,
    bgColor: string
}) {
    const boxStyle = {
        backgroundColor: bgColor,
        padding: '15px',
        boxSizing: 'border-box',
        height: '45px',
        width: '240px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
    }

    const textStyle = {
        fontSize: '14px',
        fontWeight: 'bold',
        color: color
    }

    return (
        <>
            <div style={boxStyle}>
                <div style={textStyle}>{count}</div>
                <div style={textStyle}>{title}</div>
            </div>
        </>
    )
}

import bgDetailsImg from '../../assets/image/组18(1).png'
import bgDetailsImgOn from '../../assets/image/组 18(3).png'

export function RevenueDetails({title, count, company, isSelect, icon}: {
    title: string,
    count: string,
    company: string
    isSelect: boolean,
    icon: string
}) {

    const boxStyle = {
        width: '100px',
        height: '130px',
        backgroundImage: `url('${bgDetailsImg}')`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between'
    }
    const boxOnStyle = {
        width: '100px',
        height: '130px',
        backgroundImage: `url('${bgDetailsImgOn}')`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between'
    }

    const titleStyle = {
        fontSize: '14px',
        color: '#fff',
        lineHeight: 1.2
    }
    const countOnStyle = {
        fontSize: '16px',
        fontWeight: 'bold',
        color: '#FFDA30',
        lineHeight: 1.2
    }
    const countStyle = {
        fontSize: '16px',
        fontWeight: 'bold',
        color: '#30FDFF',
        lineHeight: 1.2
    }
    const companyStyle = {
        fontSize: '12px',
        color: '#aaa',
        lineHeight: 1.2
    }
    const companyOnStyle = {
        fontSize: '12px',
        color: '#fff',
        lineHeight: 1.2
    }

    const iconStyle = {
        width: '40px',
        height: '40px',
        backgroundImage: `url('${icon}')`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        marginTop: '15px',
        marginBottom: '25px'
    }
    return (
        <>
            <div style={isSelect ? boxOnStyle : boxStyle}>
                <div style={isSelect ? countOnStyle : countStyle}>{count}</div>
                <div style={titleStyle}>{title}</div>
                <div style={isSelect ? companyOnStyle : companyStyle}>({company})</div>
                <div style={iconStyle}></div>
            </div>
        </>
    )
}
